<template>
    <div class="custom-bread-crumb">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in breadCrumbList" :to="item.to" :key="`bread-crumb-${item.name}`">
                <i :class="item.meta.icon" style="margin-right: 4px;"></i>
                {{item.meta.title}}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
export default {
    name: "CustomBreadCrumb",
    computed: {
        breadCrumbList() {
            return this.$store.state.app.breadCrumbList;
        }
    },
    methods: {
        ...mapMutations(["setBreadCrumb"])
    },
    mounted() {
        this.setBreadCrumb(this.$route.matched);
    },
    watch: {
        $route(newRoute) {
            this.setBreadCrumb(newRoute.matched);
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>